<template>
  <div class="home-container">
    <div class="banner">
      <h1 class="banner-title">友联</h1>
    </div>
    <div class="card-container">
      <el-card class="cardbg">
        <div class="link-title" style="font-size: 24px">
          <i class="el-icon-link" color="blue"></i>大佬链接
        </div>
        <div class="cardposition">
          <el-card class="cardmain" v-for="item in links" :key="item.name">
            <div class="carditem">
              <div>
                <img class="cardimg" :src="item.avatar" alt="" />
              </div>
              <div class="cardmess">
                <a :href="item.link" target="_blank">
                  <h1>{{ item.name }}</h1>
                  <p>{{ item.topic }}</p>
                </a>
              </div>
            </div>
          </el-card>
        </div>
        <div class="link-title"><i class="el-icon-coin" color="blue"></i>添加友联</div>
        <blockquote>
          <!-- <div>名称：{{ blogInfo.websiteConfig.websiteName }}</div>
        <div>简介：{{ blogInfo.websiteConfig.websiteIntro }}</div>
        <div>头像：{{ blogInfo.websiteConfig.websiteAvatar }}</div> -->
          <div>例：</div>
          <div>名称：白琉香</div>
          <div>简介：白内障看不清，硫酸兑水滴眼睛</div>
          <div>头像：http://img.xiyblog.cn/img/4.jpg</div>
        </blockquote>

        <div class="mess">需要交换友链的可在留言区留言💖</div>
        <blockquote class="mb-10">
          友链信息展示需要，你的信息格式要包含：名称、介绍、头像链接
        </blockquote>
      </el-card>
    </div>

    <div class="card-container">
      <el-card class="cardbg">
        <h1>评论区</h1>
        <Valine></Valine>
      </el-card>
    </div>
  </div>
</template>

<script>
import Valine from "valine";
export default {
  name: "Links",
  components: {
    Valine: () => import("@/components/Valine.vue"),
  },
  data() {
    return {
      links: [
        {
          name: "夜色",
          topic: "风、宇的个人博客",
          avatar: "http://img.xiyblog.cn/img/21.jpg",
          link: "https://www.talkxj.com/",
        },
        {
          name: "water-zhi",
          topic: "记录成长",
          avatar:
            "http://8.130.45.202:9000/blog/2023/02/23/25f1694a06b743f6ad7f594fdfb3618a.jpg",
          link: "http://water-zhi.cn/",
        },
        {
          name: "Hello World",
          topic: "掐指yi'算 逢考必过",
          avatar: "https://static.ttkwsd.top/config/05409c1ed50047535f28a40464f7b1ab.jpg",
          link: "https://www.ttkwsd.top/",
        },
      ],
    };
  },
};
</script>

<style scoped>
h1 {
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 8px;
  color: #2ba1d1;
}
p {
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #49b1f5;
}
.cardposition{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cardmain {
  border-radius: 12px;
  padding: 2 6px;
  width: 46%;
  height: 120px;
  margin-top: 16px;
  background-color: #ecf7fe;

  transform-style: preserve-3d;
  transform-origin: top center;
  transition: transform 0.35s ease-in-out;
}

.cardmain:hover ::before {
  opacity: 0.8;
  transform: rotateX(12deg) translateY(-8px) scale(3);
}

.cardmain:hover {
  transform: rotateX(12deg) translateY(-8px);
  opacity: 0.9;
}

.cardmain:hover::after {
  transform: translateY(100%);
}

.carditem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cardimg {
  /* width: 50px;
  min-width: 50px;
  height: 50px; */
  /* :size="96" */
  border-radius: 50%;
  width: 96px;
  min-width: 96px;
  height: 96px;
  margin-top: -4px;
}
.cardmess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  /* margin-top: 16px; */
  /* padding-top: 16px; */
}
.cardmess a {
  text-decoration: none;
}
.card-container {
  overflow-x: hidden;
}
.mess {
  margin: 20px;
}
.link-title {
  color: #344c67;
  font-size: 21px;
  font-weight: bold;
  line-height: 2;
}
blockquote {
  line-height: 2;
  margin: 0;
  font-size: 15px;
  border-left: 0.2rem solid #49b1f5;
  padding: 10px 1rem !important;
  background-color: #ecf7fe;
  border-radius: 4px;
}
.cardbg {
  /* background-color: #eee; */
  opacity: 0.8;
  height: 100%;
  /* display: flex;
  flex-direction: column; */
  position: relative;
  animation: main 1s;
  max-width: 951px;
  padding: 24px 40px;
  margin: 26px auto 17px auto;
  /* overflow: scroll; */
}
.banner {
  /* position: absolute; */
  background-color: #49b1f5 !important;
  top: -60px;
  left: 0;
  right: 0;
  height: 320px;
  animation: header-effect 1s;
  opacity: 0.8;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/other/ot1%20%282%29.jpg")
    center center / cover no-repeat;
}
.banner-title {
  animation: title-scale 1s;
  position: relative;
  top: 6.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}
.carimg {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  object-fit: cover;
  /* opacity: 0.8; */
  /* position: fixed; */
  z-index: -9;

  /* top: -60px; */
}
.home-container {
  z-index: -9;
  /* height: 100%; */
  width: 100%;
  /* overflow: auto; */
  /* overflow-y: scroll; */
  /* position: absolute; */
  /* overflow: scroll; */
}
</style>
